<template>
  <div>
    <div class="row-header">
      <el-form :model="form" ref="form" label-width="50px" inline>
        <el-form-item label=" " prop="date">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="订单开始时间"
            end-placeholder="订单结束时间"
            :picker-options="pickerOptions"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            style="width: 500px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label=" " prop="cardNo">
          <el-input v-model.trim="form.cardNo" style="width: 300px;" placeholder="请输入业务号码/ICCID/IMSI/MSISDN"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="dictStatus">
          <el-select v-model="form.dictStatus" placeholder="请选择状态" style="width: 300px;">
            <el-option
              key=""
              label="请选择"
              value="">
            </el-option>
            <el-option
              key="REFUND_SUCCESS"
              label="退款成功"
              value="REFUND_SUCCESS">
            </el-option>
            <el-option
              key="REFUNDING"
              label="退款进行中"
              value="REFUNDING">
            </el-option>
            <el-option
              key="REFUND_FAIL"
              label="退款失败"
              value="REFUND_FAIL">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda"  size="small" @click="onSubmit('form')" icon="el-icon-search">查询</el-button>
        <el-button type="shenda"  size="small" @click="resetForm('form')" icon="el-icon-refresh-right">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table
        ref="table"
        :data="tableData"
        :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
        align="center"
        v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
        v-has="'balanceRefundPer'"
        class="row-main-table"
      >
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="cardNumber" label="卡号" align="center"></el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" align="center"></el-table-column>
        <el-table-column prop="refundBalance" label="退款余额" align="center"></el-table-column>
        <el-table-column prop="insertTime" label="退款时间" align="center"></el-table-column>
        <el-table-column prop="dictStatusName" label="退款状态" align="center"></el-table-column>
        <el-table-column prop="empName" label="操作人" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        <el-table-column prop="wxbackJson" label="失败原因" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.dictStatus=='REFUND_FAIL'">{{scope.row.wxbackJson}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          v-has="'balanceRefundPer'"
          :current-page.sync="current"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10,20,50,100]"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  import {balanceRefundList} from '@/api/getData'

  export default {
    name: "balanceRefundOrder",
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        form: {
          date: [],
          cardNo: '',
        },
        tableData: [],
        total: 0,
        current: 1,
        pageSize: 10,
        tableLoading : false,

      }
    },
    mounted(){
      this.innitData();
    },
    methods:{
      //获取订单列表
      async innitData(){
        this.tableLoading = true;
        let startDate,endDate = '';
        if(this.form.date){
          startDate = this.form.date[0];
          endDate = this.form.date[1];
        }
        this.tableData = [];
        let returnData = await balanceRefundList({
          insertEndDate: startDate,
          insertStartDate: endDate,
          cardNumber: this.form.cardNo,
          dictStatus: this.form.dictStatus,
          page:{
            current: this.current,
            size: this.pageSize
          }
        });
        if(returnData._result){
          this.tableLoading = false;
          this.total = returnData.data.total;
          if(returnData.data.records&&returnData.data.records.length>0)this.tableData = returnData.data.records
        }
      },
      //翻页
      handleCurrentChange(val){
        this.current = val;
        this.innitData();
      },
      handleSizeChange(val){
        this.current = 1;
        this.pageSize = val;
        this.innitData();
      },
      //重置
      resetForm(formName){
        this.$refs[formName].resetFields();
      },
      //查询
      onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            this.page = 1;
            this.innitData();
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
